<template>
	<view class="content">
		<view class="title">个人名片</view>
		<view class="person-card">
			<view class="card-header" v-if="personCard.id">
				<view class="left">
					<image :src="personCard.photo_url" />
				</view>
				<view class="right">
					<view class="name">{{personCard.realname==null?personCard.nickname:personCard.realname}}</view>
					<view class="phone">
						<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/phon.png"></image>
						<text>{{personCard.phone_number}}</text>
					</view>
				</view>
			</view>
			<view class="card-btn" v-if="personCard.id">
				<button @click="toSetPersonCard">编辑</button>
				<button style="margin-left: auto;" @click="generateCard('')">生成名片</button>
			</view>
			<view class="card-null" v-if="!personCard.id">
				<button @click="toSetPersonCard">创建名片</button>
			</view>
		</view>
		<view class="title">企业名片</view>
		<view class="company-card">
			<view class="card-header" v-if="companyCard.id">
				<view class="left">
					<image :src="companyCard.logo_url" />
				</view>
				<view class="right">
					<view class="name">{{companyCard.user_name}}</view>
					<view class="phone">
						<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/phon.png"></image>
						<text>{{companyCard.phone}}</text>
					</view>
				</view>
			</view>
			<view class="card-item" v-if="companyCard.id">
				<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/company.png"></image>
				<view class="item-title">
					{{companyCard.company_name}}
				</view>
			</view>
			<view class="card-item" v-if="companyCard.id">
				<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/add.png"></image>
				<view class="item-title" v-if="companyCard.address==null">
					无
				</view>
				<view class="item-title" v-else>
					{{companyCard.address}}
				</view>
			</view>
			<view class="card-item" v-if="companyCard.id">
				<image src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/message.png"></image>
				<view class="item-title">
					{{companyCard.email}}
				</view>
			</view>
			<view class="card-btn" v-if="companyCard.id">
				<button @click="toSetCompanyCard">编辑</button>
				<button style="margin-left: auto;" @click="generateCard('company')">生成名片</button>
			</view>
			<view class="card-null" v-if="!companyCard.id">
				<button @click="toSetCompanyCard">创建名片</button>
			</view>
		</view>
		<!-- <view class="rule" @click="toUserRule">
			<text>用户权益及规则</text>
		</view> -->
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor-white padding1vh border_radius_10px">
					<image :src="poster.finalPath" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button type="primary" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
					<!-- <button type="primary" size="mini" open-type="share">分享图片</button> -->
				</view>
			</view>
		</view>
		<!-- <button type="primary" @tap="shareFc()">生成海报</button> -->
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||0) + 'px', height: (poster.height||0) + 'px'}"></canvas>
		</view>
	</view>
</template>

<script>
	import _app from '@/util/QS-SharePoster/app.js';
	import getSharePoster from '@/util/QS-SharePoster/QS-SharePoster.js';
	export default {
		data() {
			return {
				userId: '', //分享人的id
				personCard: '',
				companyCard: '',
				poster: {},
				qrShow: false,
				canvasId: 'default_PosterCanvasId',
				cardType: '',
				qrCode: '',
				is_person_vip: '',
				is_company_vip: ''
			}
		},
		methods: {
			async generateCard(type) {
				let params = {
					user_token: uni.getStorageSync('userToken'),
					type: type
				}
				const res = await this.$api.getMyCardShareQRCode(params);
				if (res.data.level == 'success') {
					this.qrCode = res.data.data;
					this.shareFc(type)
				}
			},
			toSetPersonCard() {
				if(this.is_person_vip==1){
					uni.navigateTo({
						url: '/pages/personcard/index'
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请登录用户后台系统购买相应产品~~'
					})
				}
				
			},
			toSetCompanyCard() {
				if(this.is_company_vip==1){
					uni.navigateTo({
						url: '/pages/companycard/index'
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请登录用户后台系统购买相应产品~~'
					})
				}
				
			},
			toUserRule() {
				uni.navigateTo({
					url: '/pages/rule/index?type='+'user'
				})
			},
			async shareFc(types) {
				try {
					if (this.cardType == '') {
						const d = await getSharePoster({
							_this: this, //若在组件中使用 必传
							type: 'testShareType',
							formData: {
								//访问接口获取背景图携带自定义数据
							},
							posterCanvasId: this.canvasId,
							imagesArray: ({
								bgObj,
								type,
								bgScale
							}) => { //接收的第一个参数为背景图片的信息, 第二个参数是自定义标识（感觉这里用不到）, 图片为示例图片
								console.log(types)
								// const dx = bgObj.width * 0.1;
								if (types == '') {
									return [{
											url: this.personCard.photo_url,
											dx: bgObj.width * 0.1,
											dy: bgObj.height * 0.1,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.2 / 72;
												return {
													circleSet: {
														x: 72 * scale / 2,
														y: 72 * scale / 2,
														r: 72 * scale / 2
													}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: 72 * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: 72 * scale,
													roundRectSet: { // 圆角矩形
														r: 72 * .1
													}
												}
											}
										},
										{
											url: this.qrCode,
											dx: bgObj.width * 0.09,
											dy: bgObj.height * 0.50,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.25 / imageInfo.height;
												return {
													// circleSet: {
													// 	x: imageInfo.width * scale / 2,
													// 	y: imageInfo.width * scale / 2,
													// 	r: imageInfo.width * scale / 2
													// }, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: imageInfo.width * scale,
													// roundRectSet: { // 圆角矩形
													// 	r: imageInfo.width * .1
													// }
												}
											}
										},
										{
											url: '/static/images/poster/phone.png',
											dx: bgObj.width * 0.58,
											dy: bgObj.height * 0.55,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.03 / imageInfo.height;
												return {
													circleSet: {
														x: imageInfo.width * scale / 2,
														y: imageInfo.width * scale / 2,
														r: imageInfo.width * scale / 2
													}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: imageInfo.width * scale,
													roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													}
												}
											}
										},
										{
											url: '/static/images/poster/email.png',
											dx: bgObj.width * 0.58,
											dy: bgObj.height * 0.65,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.03 / imageInfo.height;
												return {
													circleSet: {
														x: imageInfo.width * scale / 2,
														y: imageInfo.width * scale / 2,
														r: imageInfo.width * scale / 2
													}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: imageInfo.width * scale,
													roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													}
												}
											}
										},
									]
								} else {
									return [{
											url: this.companyCard.logo_url,
											dx: bgObj.width * 0.16,
											dy: bgObj.height * 0.1,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.13 / 72;
												return {
													circleSet: {
														x: 72 * scale / 2,
														y: 72 * scale / 2,
														r: 72 * scale / 2
													}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: 72 * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: 72 * scale,
													roundRectSet: { // 圆角矩形
														r: 72 * .1
													}
												}
											}
										},
										{
											url: this.qrCode,
											dx: bgObj.width * 0.09,
											dy: bgObj.height * 0.50,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.25 / imageInfo.height;
												return {
													// circleSet: {
													// 	x: imageInfo.width * scale / 2,
													// 	y: imageInfo.width * scale / 2,
													// 	r: imageInfo.width * scale / 2
													// }, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: imageInfo.width * scale,
													// roundRectSet: { // 圆角矩形
													// 	r: imageInfo.width * .1
													// }
												}
											}
										},
										{
											url: '/static/images/poster/website.png',
											dx: bgObj.width * 0.58,
											dy: bgObj.height * 0.55,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.03 / imageInfo.height;
												return {
													circleSet: {
														x: imageInfo.width * scale / 2,
														y: imageInfo.width * scale / 2,
														r: imageInfo.width * scale / 2
													}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: imageInfo.width * scale,
													roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													}
												}
											}
										},
										{
											url: '/static/images/poster/adress.png',
											dx: bgObj.width * 0.58,
											dy: bgObj.height * 0.65,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.03 / imageInfo.height;
												return {
													circleSet: {
														x: imageInfo.width * scale / 2,
														y: imageInfo.width * scale / 2,
														r: imageInfo.width * scale / 2
													}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: imageInfo.width * scale,
													roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													}
												}
											}
										},
										{
											url: '/static/images/poster/phone.png',
											dx: bgObj.width * 0.58,
											dy: bgObj.height * 0.75,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.03 / imageInfo.height;
												return {
													circleSet: {
														x: imageInfo.width * scale / 2,
														y: imageInfo.width * scale / 2,
														r: imageInfo.width * scale / 2
													}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: imageInfo.width * scale,
													roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													}
												}
											}
										},
										{
											url: '/static/images/poster/email.png',
											dx: bgObj.width * 0.58,
											dy: bgObj.height * 0.85,
											infoCallBack(imageInfo) {

												let scale = bgObj.width * 0.03 / imageInfo.height;
												return {
													circleSet: {
														x: imageInfo.width * scale / 2,
														y: imageInfo.width * scale / 2,
														r: imageInfo.width * scale / 2
													}, // 圆形图片 , 若circleSet与roundRectSet一同设置 优先circleSet设置
													dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
													dHeight: imageInfo.width * scale,
													roundRectSet: { // 圆角矩形
														r: imageInfo.width * .1
													}
												}
											}
										},

									]
								}
							},
							textArray: ({
								bgObj,
								type,
								bgScale
							}) => {
								const fontSize = bgObj.width * 0.045;
								const lineHeight = bgObj.height * 0.04;
								if (types == '') {
									return [{
										fontStyle: 'normal',
										text: this.personCard.realname,
										size: 130,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											_app.log('index页面的text的infocallback ，textlength:' + textLength);
											return {
												dx: bgObj.width * 0.58,
												dy: bgObj.height * 0.23
											}
										}
									}, {
										text: this.personCard.position,
										size: 50,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.58,
												dy: bgObj.height * 0.38
											}
										}
									}, {
										text: 'Td：' + this.personCard.phone_number,
										size: 30,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.63,
												dy: bgObj.height * 0.58
											}
										}
									}, {
										text: 'E-mail：' + this.personCard.email,
										size: 30,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.63,
												dy: bgObj.height * 0.68
											}
										}
									}, ]
								} else {
									return [{
										fontStyle: 'normal',
										text: this.companyCard.company_name,
										size: 50,
										color: 'white',
										alpha: 1,
										textAlign: 'center',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.23,
												dy: bgObj.height * 0.38
											}
										}
									},{
										fontStyle: 'normal',
										text: this.companyCard.user_name,
										size: 130,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.58,
												dy: bgObj.height * 0.23
											}
										}
									}, {
										text: this.companyCard.position,
										size: 50,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.58,
												dy: bgObj.height * 0.38
											}
										}
									}, {
										text: 'Web：' + this.companyCard.website,
										size: 30,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.63,
												dy: bgObj.height * 0.58
											}
										}
									}, {
										text: this.companyCard.address,
										size: 30,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.63,
												dy: bgObj.height * 0.68
											}
										}
									}, {
										text: 'Td：' + this.companyCard.phone_number,
										size: 30,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.63,
												dy: bgObj.height * 0.78
											}
										}
									}, {
										text: 'E-mail：' + this.companyCard.email,
										size: 30,
										color: 'white',
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: bgObj.width * 0.63,
												dy: bgObj.height * 0.88
											}
										}
									}, ]
								}

							},
							setCanvasWH: ({
								bgObj,
								type,
								bgScale
							}) => { // 为动态设置画布宽高的方法，
								this.poster = bgObj;
							},
							// setDraw: ({
							// 	Context,
							// 	bgObj,
							// 	type,
							// 	bgScale
							// }) => {
							// 	Context.setFillStyle('black');
							// 	Context.setGlobalAlpha(0.3);
							// 	Context.fillRect(0, bgObj.height - bgObj.height * 0.2, bgObj.width, bgObj.height * 0.2);
							// }
						});
						console.log('海报生成成功， 临时路径: ' + d.poster.tempFilePath)
						this.poster.finalPath = d.poster.tempFilePath;
					}
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(JSON.stringify(e));
				}
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			share() {
				// #ifdef APP-PLUS
				_app.getShare(false, false, 2, '', '', '', this.poster.finalPath, false, false);
				// #endif

				// #ifndef APP-PLUS
				_app.showToast('分享了');
				// #endif
			},
			hideQr() {
				this.qrShow = false;
			},
			async getCompanyCardData() {
				let userToken = uni.getStorageSync('userToken');
				let res = await this.$api.getCompanyCardData({
					user_token: userToken
				})
				if (res.data.level == 'success') {
					this.companyCard = res.data.data;
					this.is_company_vip = res.data.is_company_vip
				}
			},
			async getMyselfBusinessCard() {
				//获取海报
				let userToken = uni.getStorageSync('userToken');
				let res = await this.$api.getMyselfBusinessCard({
					user_token: userToken,
					// uid: this.userId //分享人的id
				})
				if (res.data.level == 'success') {
					this.personCard = res.data.data;
					this.is_person_vip = res.data.is_person_vip
					// this.userId = res.data.data.user_id;
				}
			}
		},
		onShareAppMessage() {
			return {
				title: '明媒品牌',
				desc: '明媒品牌',
				path: `/pages/poster/index?userId=${this.userId}`
			}
		},
		onLoad(options) {
			if (options.userId) {
				this.userId = options.userId;
			}
		},
		onShow() {
			this.getMyselfBusinessCard();
			this.getCompanyCardData();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		background: #EEEEEE;
	}

	.title {
		font-weight: bold;
		width: calc(100% - 60rpx);
		padding: 30rpx;
		line-height: 60rpx;
		height: 60rpx;
		font-size: 32rpx;
	}

	.person-card,
	.company-card {
		padding: 30rpx;
		width: calc(100vw - 60rpx);
		background: #FFFFFF;
	}

	.card-header {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;

		.left {
			width: 100rpx;
			height: 100rpx;
			border-radius: 360rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			margin-left: auto;
			width: calc(100% - 140rpx);
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			height: 100rpx;

			.name {
				width: 100%;
				font-size: 28rpx;
				font-weight: bold;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}

			.phone {
				margin-top: auto;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;
				}

				text {
					line-height: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.card-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		padding: 30rpx 0;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}

		.item-title {
			line-height: 40rpx;
			height: 40rpx;
		}
	}

	.card-btn {
		padding-top: 40rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		width: 100%;

		button {
			padding: 10rpx 40rpx;
			line-height: 40rpx;
			margin: 0;
			font-size: 24rpx;
		}
	}

	.card-null {
		padding: 50rpx 100rpx;
	}

	.rule {
		margin-top: auto;
		padding: 100rpx;
		text-align: center;
		width: calc(100vw - 200rpx);

		text {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}
</style>
<style lang="scss" scoped>
	// .content{
	// 	background: url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/posterbg.png');
	// 	background-size: 100%;
	// 	width: 100vw;
	// 	min-height: 100vh;
	// 	color:#fff;
	// 	postiton:relative;
	// }
	.poster-header {
		display: flex;
		justify-content: space-between;
		padding: 40rpx;

		.poster-header-left {
			.post {
				font-size: 30rpx;
			}
		}

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
	}

	.poster-message {
		position: absolute;
		top: 360rpx;
		left: 250rpx;

		.poster-message-item {
			img {
				width: 60rpx;
				height: 60rpx;
				margin: 20rpx;
			}

			font-size: 25rpx;
			display: flex;
			align-items: center;
		}

		.company-address {
			width: 300rpx;
			// display: flex;
			// flex-wrap: wrap;
		}

	}






	.hideCanvasView {
		position: relative;
	}

	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}

	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(3);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}

	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
	}

	.flex_column {
		display: flex;
		flex-direction: column;
	}

	.backgroundColor-white {
		background-color: white;
	}

	.border_radius_10px {
		border-radius: 10px;
	}

	.padding1vh {
		padding: 1vh;
	}

	.posterImage {
		width: 80vw;
	}

	.flex_row {
		display: flex;
		flex-direction: row;
	}

	.marginTop2vh {
		margin-top: 2vh;
	}
</style>
